<template>
  <div :class="rowClassName?`j-form-row ${rowClassName}`:'j-form-row'">
    <div class="input-errors" v-if="errors[errorsKey]">{{ errors[errorsKey] }}</div>
    <input :type="type" v-model="ivalue" :placeholder="placeholder" :class="errors[errorsKey] ? `input ${className} error`: `input ${className}`">
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {
  name: 'Input',
  props: {
    type: String,
    errors: Object,
    errorsKey: String,
    value: String,
    className: String,
    placeholder: String,
    rowClassName: String,
  },
  data() {
    return {
      ivalue: ''
    }
  },
  watch: {
    value: function () { // 监听父组件传递过来的值
      if (this.value !== null) { // 如果父组件传递了值，我们就把值赋给子组件的输入框
        this.ivalue = this.value
      }
    },
    ivalue: function () { // 监听父组件传递过来的值
      if (this.value !== null) { // 如果父组件传递了值，我们就把值赋给子组件的输入框
        this.$emit('update:value', this.ivalue);
      }
    },
  }
};
</script>

<style scoped>

.j-form-row {
  vertical-align: middle;
}

.input {
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%;
  font-size: 14px !important;
}

.input:hover {
  border-color: #C0C4CC;
}

input::-webkit-input-placeholder {
  color: #7586A6;
  font-size: 13px;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #7586A6;
  font-size: 13px;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #7586A6;
  font-size: 13px;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7586A6;
  font-size: 13px;
}

input.error {
  border: 1px solid #F56C6C;
}

input.input.error:hover {
  border: 1px solid #F56C6C;
}

.input-errors {
  color: #F56C6C;
  font-size: 14px;
}

input.input.captcha {
  width: 150px;
  margin-right: 15px;
}
</style>
